import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom'
import { Table, PageHeader, Layout, Button, Modal, Form, Input, Switch, Space } from 'antd';

import { ProductProps } from '@/types/productTypes';
import { useProduct } from '@/hooks/useProduct';
import { addProduct, deleteProduct, updateProduct } from '@/api/product';




// 产品相关
const ProductList: React.FC = (props: any) => {
    const [show, setShow] = useState(false);
    let [key, setKey] = useState(0);
    const [productId, setProductId] = useState<string>('');
    const [form] = Form.useForm();
    const navigate = useNavigate();
    const [products, setProducts] = useProduct(key);
    const columns = [
        {
            title: '产品名称',
            dataIndex: 'productName',
            key: 'productName',
        },
        {
            title: '产品状态',
            key: 'status',
            render: (text: ProductProps) => <div>{text.status === 1 ? '启用' : '禁用'}</div>
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '备注',
            key: 'productDesc',
            dataIndex: 'productDesc',
        },
        {
            title: '操作',
            key: 'action',
            render: (text: ProductProps, record: any) => {
                const deleteItem = async () => {
                    const res = await deleteProduct(text);
                    if (res.code === 0) {
                        setKey(++key);
                    }
                }
                const editItem = async () => {
                    form.setFieldsValue({ ...text, status: text.status === 1 ? true : false })
                    setProductId(text._id);
                    setShow(true);
                }
                const goTo = () => {
                    localStorage.setItem("productId", text._id);
                    navigate('/home');
                }
                return <Space size="middle">
                    <a onClick={deleteItem}>删除</a>
                    <a onClick={editItem}>编辑</a>
                    <a onClick={goTo}>mock</a>
                </Space>
            },
        },
    ];



    const editProduct = (value: string) => {

    }
    const handleOk = () => {
        // 调用submit方法会自动调用 onFinish, 如果校验信息不通过会调用onFinishFailed
        form.submit();
    }

    const handleCancel = () => {
        setShow(false);
    }

    const onFinish = async (value: ProductProps) => {
        if (productId !== "") {
            const res = await updateProduct({ ...value, _id: productId });
            if (res.code === 0) {
                setKey(++key)
                setShow(false);
            }
        } else {
            const res = await addProduct(value);
            if (res.code === 0) {
                setKey(++key)
                setShow(false);
            }
        }
    }
    const onFinishFailed = (value: any) => {
        console.log(value);
    }
    return (
        <Layout className='product-container'>
            <PageHeader
                className="site-page-header"
                ghost={false}
                title="产品管理"
                avatar={{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }}
                extra={[
                    <Button key="1" type='primary' onClick={() => setShow(true)}>创建产品</Button>
                ]}
            >
            </PageHeader>
            <div className='product-card'>
                <Table rowKey="_id" columns={columns} dataSource={products as ProductProps[]} />
            </div>
            <Modal title="创建/编辑产品" visible={show} onOk={handleOk} onCancel={handleCancel}>
                <Form
                    name="basic"
                    form={form}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="产品名称"
                        name="productName"
                        rules={[{ required: true, message: '请输入产品名称!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="是否启用"
                        name="status"
                        valuePropName="checked"
                        rules={[{ required: true, message: '请选择是否启用!' }]}
                    >
                        <Switch checkedChildren="启用" unCheckedChildren="禁用" />
                    </Form.Item>
                    <Form.Item
                        label="产品描述"
                        name="productDesc"
                        rules={[{ required: true, message: '请输入产品描述!' }]}
                    >
                        <Input.TextArea />
                    </Form.Item>
                </Form>
            </Modal>
        </Layout>
    )
}


export default ProductList; 
